<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TB_TAG标签管理功能测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .test-section { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
        .test-title { font-size: 18px; font-weight: bold; color: #333; margin-bottom: 10px; }
        .test-button { 
            background: #409EFF; color: white; border: none; padding: 8px 16px; 
            margin: 5px; border-radius: 4px; cursor: pointer; 
        }
        .test-button:hover { background: #66b1ff; }
        .result { margin: 10px 0; padding: 10px; background: #f5f5f5; border-radius: 4px; }
        .success { color: #67c23a; }
        .error { color: #f56c6c; }
        .info { color: #909399; }
        .form-group { margin: 10px 0; }
        .form-group label { display: inline-block; width: 100px; }
        .form-group input, .form-group select { padding: 5px; margin-left: 10px; }
    </style>
</head>
<body>
    <h1>TB_TAG标签管理功能测试</h1>
    
    <div class="test-section">
        <div class="test-title">1. 连接测试</div>
        <button class="test-button" onclick="testConnection()">测试后端连接</button>
        <div id="connectionResult" class="result"></div>
    </div>

    <div class="test-section">
        <div class="test-title">2. 查询TB_TAG列表</div>
        <button class="test-button" onclick="testGetTbTagList()">查询标签列表</button>
        <div id="listResult" class="result"></div>
    </div>

    <div class="test-section">
        <div class="test-title">3. 新增TB_TAG标签</div>
        <div class="form-group">
            <label>标签名称:</label>
            <input type="text" id="addTagName" placeholder="请输入标签名称" value="测试标签">
        </div>
        <div class="form-group">
            <label>标签类型:</label>
            <select id="addTagType">
                <option value="1">类型1</option>
                <option value="2">类型2</option>
                <option value="3">类型3</option>
            </select>
        </div>
        <div class="form-group">
            <label>标签状态:</label>
            <select id="addTagStatus">
                <option value="1">启用</option>
                <option value="0">禁用</option>
            </select>
        </div>
        <button class="test-button" onclick="testAddTbTag()">新增标签</button>
        <div id="addResult" class="result"></div>
    </div>

    <div class="test-section">
        <div class="test-title">4. 修改TB_TAG标签</div>
        <div class="form-group">
            <label>标签ID:</label>
            <input type="number" id="updateTagId" placeholder="请输入要修改的标签ID">
        </div>
        <div class="form-group">
            <label>标签名称:</label>
            <input type="text" id="updateTagName" placeholder="请输入新的标签名称" value="修改后的标签">
        </div>
        <div class="form-group">
            <label>标签类型:</label>
            <select id="updateTagType">
                <option value="1">类型1</option>
                <option value="2">类型2</option>
                <option value="3">类型3</option>
            </select>
        </div>
        <div class="form-group">
            <label>标签状态:</label>
            <select id="updateTagStatus">
                <option value="1">启用</option>
                <option value="0">禁用</option>
            </select>
        </div>
        <button class="test-button" onclick="testUpdateTbTag()">修改标签</button>
        <div id="updateResult" class="result"></div>
    </div>

    <div class="test-section">
        <div class="test-title">5. 删除TB_TAG标签</div>
        <div class="form-group">
            <label>标签ID:</label>
            <input type="number" id="deleteTagId" placeholder="请输入要删除的标签ID">
        </div>
        <button class="test-button" onclick="testDeleteTbTag()">删除标签</button>
        <div id="deleteResult" class="result"></div>
    </div>

    <div class="test-section">
        <div class="test-title">6. 查询单个TB_TAG标签</div>
        <div class="form-group">
            <label>标签ID:</label>
            <input type="number" id="getTagId" placeholder="请输入标签ID">
        </div>
        <button class="test-button" onclick="testGetTbTag()">查询标签详情</button>
        <div id="getResult" class="result"></div>
    </div>

    <script>
        const baseUrl = 'http://localhost:8080';

        // 测试连接
        async function testConnection() {
            const resultDiv = document.getElementById('connectionResult');
            try {
                const response = await fetch(`${baseUrl}/homepage/tag/list?pageNum=1&pageSize=1`);
                if (response.ok) {
                    resultDiv.innerHTML = '<span class="success">✓ 后端连接成功</span>';
                } else {
                    resultDiv.innerHTML = `<span class="error">✗ 连接失败: ${response.status}</span>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 连接错误: ${error.message}</span>`;
            }
        }

        // 查询TB_TAG列表
        async function testGetTbTagList() {
            const resultDiv = document.getElementById('listResult');
            try {
                const response = await fetch(`${baseUrl}/homepage/tag/list?pageNum=1&pageSize=10`);
                const data = await response.json();
                if (response.ok) {
                    resultDiv.innerHTML = `<span class="success">✓ 查询成功</span><br>
                        <span class="info">总数: ${data.total}</span><br>
                        <pre>${JSON.stringify(data.rows, null, 2)}</pre>`;
                } else {
                    resultDiv.innerHTML = `<span class="error">✗ 查询失败: ${data.msg}</span>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 查询错误: ${error.message}</span>`;
            }
        }

        // 新增TB_TAG标签
        async function testAddTbTag() {
            const resultDiv = document.getElementById('addResult');
            const tagName = document.getElementById('addTagName').value;
            const tagType = parseInt(document.getElementById('addTagType').value);
            const tagStatus = parseInt(document.getElementById('addTagStatus').value);

            if (!tagName) {
                resultDiv.innerHTML = '<span class="error">✗ 请输入标签名称</span>';
                return;
            }

            try {
                const response = await fetch(`${baseUrl}/homepage/tag`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        tagName: tagName,
                        tagType: tagType,
                        tagStatus: tagStatus
                    })
                });
                const data = await response.json();
                if (response.ok && data.code === 200) {
                    resultDiv.innerHTML = `<span class="success">✓ 新增成功</span><br>
                        <span class="info">返回数据: ${JSON.stringify(data, null, 2)}</span>`;
                } else {
                    resultDiv.innerHTML = `<span class="error">✗ 新增失败: ${data.msg}</span>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 新增错误: ${error.message}</span>`;
            }
        }

        // 修改TB_TAG标签
        async function testUpdateTbTag() {
            const resultDiv = document.getElementById('updateResult');
            const tagId = document.getElementById('updateTagId').value;
            const tagName = document.getElementById('updateTagName').value;
            const tagType = parseInt(document.getElementById('updateTagType').value);
            const tagStatus = parseInt(document.getElementById('updateTagStatus').value);

            if (!tagId || !tagName) {
                resultDiv.innerHTML = '<span class="error">✗ 请输入标签ID和标签名称</span>';
                return;
            }

            try {
                const response = await fetch(`${baseUrl}/homepage/tag`, {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        tagId: parseInt(tagId),
                        tagName: tagName,
                        tagType: tagType,
                        tagStatus: tagStatus
                    })
                });
                const data = await response.json();
                if (response.ok && data.code === 200) {
                    resultDiv.innerHTML = `<span class="success">✓ 修改成功</span><br>
                        <span class="info">返回数据: ${JSON.stringify(data, null, 2)}</span>`;
                } else {
                    resultDiv.innerHTML = `<span class="error">✗ 修改失败: ${data.msg}</span>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 修改错误: ${error.message}</span>`;
            }
        }

        // 删除TB_TAG标签
        async function testDeleteTbTag() {
            const resultDiv = document.getElementById('deleteResult');
            const tagId = document.getElementById('deleteTagId').value;

            if (!tagId) {
                resultDiv.innerHTML = '<span class="error">✗ 请输入标签ID</span>';
                return;
            }

            try {
                const response = await fetch(`${baseUrl}/homepage/tag/${tagId}`, {
                    method: 'DELETE'
                });
                const data = await response.json();
                if (response.ok && data.code === 200) {
                    resultDiv.innerHTML = `<span class="success">✓ 删除成功</span><br>
                        <span class="info">返回数据: ${JSON.stringify(data, null, 2)}</span>`;
                } else {
                    resultDiv.innerHTML = `<span class="error">✗ 删除失败: ${data.msg}</span>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 删除错误: ${error.message}</span>`;
            }
        }

        // 查询单个TB_TAG标签
        async function testGetTbTag() {
            const resultDiv = document.getElementById('getResult');
            const tagId = document.getElementById('getTagId').value;

            if (!tagId) {
                resultDiv.innerHTML = '<span class="error">✗ 请输入标签ID</span>';
                return;
            }

            try {
                const response = await fetch(`${baseUrl}/homepage/tag/${tagId}`);
                const data = await response.json();
                if (response.ok && data.code === 200) {
                    resultDiv.innerHTML = `<span class="success">✓ 查询成功</span><br>
                        <pre>${JSON.stringify(data.data, null, 2)}</pre>`;
                } else {
                    resultDiv.innerHTML = `<span class="error">✗ 查询失败: ${data.msg}</span>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<span class="error">✗ 查询错误: ${error.message}</span>`;
            }
        }

        // 页面加载时自动测试连接
        window.onload = function() {
            testConnection();
        };
    </script>
</body>
</html>
